<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="../css/main.css" />
    <noscript><link rel="stylesheet" href="../css/noscript.css" /></noscript>
</head>
<body class="is-preload">

<div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#Catalog").hide().fadeIn();
        });
    </script>
</div>

    <script src="../js/pics.js"></script>
<div id="wrapper">
    <div th:replace="common/top">
    </div>
    <div id="Catalog">

        <br>
        <br>
        <br>
        <form action="/account/UpdateInformation" method="post">
            <h3>User Information</h3>

                <table>
                    <tr>
                        <td>User ID:</td>
                        <td th:text="${account.username}">
                           <input class="input-sign" id="username" type="text" name="username" placeholder="Username" onblur="usernameIsExist();" th:value="${session.account.username}" />
                            <div id="usernameMsg"></div>
                            <span id="usernameTips"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>Old Password:</td>
                        <td th:text="${account.password}">
                        </td>
                    </tr>
                    <tr>
                        <td>New password:</td>
                        <td><input class="input-sign" id="password" type="password" name="password" placeholder="New password" th:value="${account.password}"/></td>
                    </tr>

                </table>
                <h3>Account Information</h3>

                <table>
                    <tr>
                        <td>First name:</td>
                        <td><input class="input-sign" type="text" name="firstname"  placeholder="First name" id="firstName" th:value="${account.firstName}" onblur="firstNameExit()" required/>
                        <div id="firstNameInfo"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td> <input class="input-sign" type="text" name="lastname"  placeholder="Last name" id="lastName" th:value="${account.lastName}" onblur="lastNameExit()" required/>
                            <div id="lastNameInfo"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>Email:</td>
                        <td>
                            <input class="input-sign" type="text" name="email"  placeholder="Email" th:value="${account.email}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Phone:</td>
                        <td>
                            <input class="input-sign" type="text" name="phone"  placeholder="Phone" th:value="${account.phone}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Status:</td>
                        <td>
                            <input class="input-sign" type="text" name="status"  placeholder="Status" th:value="${account.status}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td>
                            <input class="input-sign" type="text" name="address1" id="address1" placeholder="Address1" th:value="${account.address1}" onblur="address1Exit()" required/>
                            <div id="address1Info"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td>
                            <input class="input-sign" type="text" name="address2"  placeholder="Address2" th:value="${account.address2}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td>
                            <input class="input-sign" type="text" name="city" id="city" placeholder="City" th:value="${account.city}" onblur="cityExit()" required/>
                            <div id="cityInfo"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td>
                            <input class="input-sign" type="text" name="state" id="state" placeholder="State" th:value="${account.state}" onblur="stateExit()" required/>
                            <div id="stateInfo"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td>
                            <input class="input-sign" type="text" name="zip" id="zip" placeholder="Zip" th:value="${account.zip}" onblur="zipExit()" required/>
                            <div id="zipInfo"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td>
                            <input class="input-sign" type="text" name="country"  id="country" placeholder="Country" th:value="${account.country}"  onblur="countryExit()" required/>
                            <div id="countryInfo"></div>
                        </td>
                    </tr>
                </table>
                <h3>Profile Information</h3>

                <table>
                    <tr>
                        <td>Language Preference:</td>
                        <td>
                            <select name="languagePreference" id="languagePerference">
<!--                                <option value="english" selected="selected">english</option>-->
<!--                                <option value="japanese">japanese</option>-->
                                <option value="English" th:if="${account.languagePreference} eq 'English'" selected="selected">English</option>
                                <option value="Chinese" th:if="${account.languagePreference} eq 'Chinese'" selected="selected">Chinese</option>
                                <option value="Japanese" th:if="${account.languagePreference} eq 'Japanese'" selected="selected">Japanese</option>
                                <option value="Korean" th:if="${account.languagePreference} eq 'Korean'" selected="selected">Korean</option>
                                <option value="German" th:if="${account.languagePreference} eq 'German'" selected="selected">German</option>
                                <option value="French" th:if="${account.languagePreference} eq 'French'" selected="selected">French</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Favourite Category:</td>
                        <td>
                            <select name="favouriteCategoryId" id="favouriteCategoryId">
                                <option value="FISH" th:if="${account.favouriteCategoryId} eq 'FISH'" selected="selected">FISH</option>
                                <option value="DOGS" th:if="${account.favouriteCategoryId} eq 'DOGS'" selected="selected">DOGS</option>
                                <option value="REPTILES" th:if="${account.favouriteCategoryId} eq 'REPTILES'" selected="selected">REPTILES</option>
                                <option value="CATS" th:if="${account.favouriteCategoryId} eq 'CATS'" selected="selected">CATS</option>
                                <option value="BIRDS" th:if="${account.favouriteCategoryId} eq 'BIRDS'" selected="selected">BIRDS</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Enable MyList</td>
                        <td><input type="checkbox" name="listOption" value="1" th:checked="${account.listOption==true}"/></td>
                    </tr>
                    <tr>
                        <td>Enable MyBanner</td>
                        <td>
                            <input type="checkbox" name="bannerOption" th:value="1" th:attr ="checked=${account.bannerOption==true?true:false}"/>
                        </td>
                    </tr>

                </table>

                <input type="submit"   name="newAccount" value="Save"  />
        </form>
        <a href="/order/listOrders">My Orders</a>

    </div>

    <div th:replace="common/bottom">
</div>
</div>
</body>
</html>